(function($){

	var $body;
	var loading;
	var window_height = $(window).height();
	var init_set = function(){
		$body.css({
			'height': window_height + "px"
		});
		$('.yf-show-windows').css({
			'margin-top': (window_height - 520) / 2 + "px"
		});
	};

	var set_arrow = function(_arrow){
		var arrow_height = _arrow.height();
		_arrow.css({
			'top': (520 - arrow_height) / 2 + "px"
		});
	};
	var imgLoaded=function(img){
		if(img.complete){
     		clearTimeout(loading);
     		var $newImg=$('.newImg');
     	/*	var w=$newImg.width(),
     			h=$newImg.height();
			//if(w<=h){
     		if((h/w)>(2/3)){
				$newImg.css({height:'520px',width:'auto',top:'0px'});
			}
			else{
				$newImg.css({height:'auto',width:'700px'});
				$newImg.css('top',(520-$newImg.height())/2+'px');
			}*/
     		$newImg.css('top',(520-$newImg.height())/2+'px');
			$('.spinner').fadeOut('100');
			$newImg.show();
		}
		else {
			$('.spinner').fadeIn('300');
			loading=setTimeout(function(){imgLoaded($('.newImg').get(0));},100);
		}
	};
	$.fn.yf_photo = function(option){
		$body = $('#yf-show');
		_this = $(this);
		var imgList;
		var thumb;
		var html = '';

		html +=	'<div class="yf-show-windows">';
		html +=	'<div class="yf-photo-one yf-photo-left">';
		html +=	'<div class="yf-arrow yf-arrow-left"><img src="/static/js/yf_photo/arrow-left.png"></div>';
		html += '<div class="yf-arrow yf-arrow-right"><img src="/static/js/yf_photo/arrow-right.png"></div>';
		html += '<div class="spinner"></div>';
		html += '</div>';

		html += '<div class="yf-photo-two yf-photo-left">';
		html += '<ul class="yf-photo-list">';
		html += '</ul>';
		html += '<div class="yf-photo-del"></div>';
		html += '</div>';
		html += '</div>';

		$body.append(html);
		_this.hover(function(){
			$(this).find('.yf-view').show();
		}, function(){
			$(this).find('.yf-view').hide();
		});
		_this.find('img, .yf-view').click(function(){
			var img = _this.attr('data-img');
		    img = img.split(',');
			imgList=img;
		    if(img.length == 0)
		    {
		    	return;
		    }
		    thumb = _this.attr('data-thumb');
		    thumb = thumb.split(',');
			var img_html = '<img src="' + thumb[0] + '" class="newImg">';
			$('.yf-photo-one').append(img_html);
			loading=setTimeout(function(){imgLoaded($('.newImg').get(0));},100);
			
			var title = _this.attr('data-title');
			var title_html = '<div class="yf-photo-title">' + title + '</div>';
			$('.yf-photo-two').prepend(title_html);

			var all_img = "";
			if (img.length>9) {
				for(var i = 0; i < 9; i++)
				{
					if(i == 0)
					{
						all_img += '<li style="background-image:url(\'' + img[i] + '\');" class="yf-photo-act" data-img="' + thumb[i] + '"><div class="yf-photo-windows"></div><div class="yf-photo-check">&radic;</div></li>';
					}
					else
					{
						if(img[i])
						all_img += '<li style="background-image:url(\'' + img[i] + '\');" data-img="' + thumb[i] + '"></li>';
					}
				}
				all_img+='<div class="yf-photo-more">查看更多图片...</div>'
			}
			else{
				for(var i = 0; i < img.length; i++)
				{
					if(i == 0)
					{
						all_img += '<li style="background-image:url(\'' + img[i] + '\');" class="yf-photo-act" data-img="' + thumb[i] + '"><div class="yf-photo-windows"></div><div class="yf-photo-check">&radic;</div></li>';
					}
					else
					{
						if(img[i])
						all_img += '<li style="background-image:url(\'' + img[i] + '\');" data-img="' + thumb[i] + '"></li>';
					}
				}
			}
			
			$('.yf-photo-list').append(all_img);
			
			$body.show();
			$(document.body).css("overflow","hidden");
		});
		init_set();
		
		set_arrow($('.yf-arrow'));

		$body.on('click', '.yf-photo-del', function(){
			$body.hide();
			$(document.body).css("overflow","auto");
			$('.yf-photo-one').find('.newImg').remove();
			$('.yf-photo-two').find('.yf-photo-title').remove();
			$('.yf-photo-list > li').each(function(){
				$(this).remove();
			});
		});

		$body.on('click', '.yf-arrow-left', function(){
			$('.newImg').hide();
			$('.yf-photo-list > li').each(function(i){
				var cname = $(this).attr('class');
				if(cname == 'yf-photo-act')
				{
					$(this).removeClass('yf-photo-act');
					$(this).find('.yf-photo-windows').remove();
					$(this).find('.yf-photo-check').remove();
					if(i == 0)
					{
						$('.yf-photo-list > li:last').addClass('yf-photo-act').append('<div class="yf-photo-windows"></div><div class="yf-photo-check">&radic;</div>');
					}
					else
					{
						$(this).prev().addClass('yf-photo-act').append('<div class="yf-photo-windows"></div><div class="yf-photo-check">&radic;</div>');
					}

					//var img_path = $('.yf-photo-act').find('img').attr('src');
					var img_path = $('.yf-photo-act').attr('data-img');
					$('.yf-photo-one > img.newImg').attr('src', img_path);
					loading=setTimeout(function(){imgLoaded($('.newImg').get(0));},100);
					return false;
				}
			});
		});

		$body.on('click', '.yf-arrow-right', function(){
			$('.newImg').hide();
			$('.yf-photo-list > li').each(function(i){
				var cname = $(this).attr('class');
				if(cname == 'yf-photo-act')
				{
					$(this).removeClass('yf-photo-act');
					$(this).find('.yf-photo-windows').remove();
					$(this).find('.yf-photo-check').remove();
					var len = $('.yf-photo-list > li').length - 1;
					if(i == len)
					{
						$('.yf-photo-list > li:first').addClass('yf-photo-act').append('<div class="yf-photo-windows"></div><div class="yf-photo-check">&radic;</div>');
					}
					else
					{
						$(this).next().addClass('yf-photo-act').append('<div class="yf-photo-windows"></div><div class="yf-photo-check">&radic;</div>');
					}

					//var img_path = $('.yf-photo-act').find('img').attr('src');
					var img_path = $('.yf-photo-act').attr('data-img');
					$('.yf-photo-one > img.newImg').attr('src', img_path);
					loading=setTimeout(function(){imgLoaded($('.newImg').get(0));},100);
				
					return false;
				}
			});
		});

		$body.on('click', '.yf-photo-list > li', function(){
			$('.newImg').hide();
			$('.yf-photo-list > li').each(function(i){
				$(this).removeClass('yf-photo-act');
				$(this).find('.yf-photo-windows').remove();
				$(this).find('.yf-photo-check').remove();
			});
				
			$(this).addClass('yf-photo-act').append('<div class="yf-photo-windows"></div><div class="yf-photo-check">&radic;</div>');
			var img_path = $('.yf-photo-act').attr('data-img');
			$('.yf-photo-one > img.newImg').attr('src', img_path);
			loading=setTimeout(function(){imgLoaded($('.newImg').get(0));},100);
		});
		$body.on('click', '.yf-photo-more', function(){
			var add_img="";
			$('.yf-photo-more').remove();
			for(var i =9 ; i < imgList.length; i++)
			{
				add_img += '<li style="background-image:url(\'' + imgList[i] + '\');" data-img="' + thumb[i] + '"></li>';
			}
			$('.yf-photo-list').append(add_img);
		});
	}
})(jQuery);
